import React from 'react'
import { UserAPI } from '../utils'
import { useNavigate } from '../react-router-dom'

function UserAdd() {
  const nameRef = React.useRef(null)
  const navigate = useNavigate()
  const handleSubmit = (event) => {
    event.preventDefault() // 阻止 submit 默认事件
    let name = nameRef.current.value
    let user = { id: Date.now() + "", name }
    UserAPI.add(user) // 添加用户
    // 跳转路由
    navigate('/user/list')
  }
  return <form onSubmit={handleSubmit}>
    <input type="text" ref={nameRef} />
    <button type="submit">添加</button>
  </form>
}

export default UserAdd
